<template>
    <div class="round_view relative transition cur" :style="{ '--scale': scale }">
        <div 
            class="circle_view transition w-full h_full absolute" 
            v-for="circle, index in list.slice(0, 8)" 
            :key="index" 
            @click="$emit('circle', index + 1)"
        >
            <div class="w-full h_full el-image">
                <img :src="require(`@/assets/round/circle${index + 1}.svg`)" class="el-image__inner" />
            </div>
            <span class="absolute flex-center circle_view-text" :class="circle > 99 ? 'font24' : 'font36'">{{ circle || 0 }}</span>
        </div>


        <div class="absolute circle_view-center transition flex_center_center" @click="$emit('learn')">
            <img src="@/assets/img/triangle.png" />学新
        </div>
    </div>
</template>

<script>

    export default {
        props: {
            list: {
                type: Array,
                default: () => ([])
            },
        },

        data () {
            return {
                clientWidth: 0,
                scale: 0.7,
                listenerResize: this.debounce(this.resize)
            }
        },

        mounted() {
            this.clientWidth = document.documentElement.clientWidth
            addEventListener('resize', this.listenerResize)
        },

        beforeDestroy() {
            this.timeStamp = ''
            removeEventListener('resize', this.listenerResize)
        },

        methods: {
            resize() {
                const width = document.documentElement.clientWidth
                if (width> this.clientWidth && this.scale < 1) this.scale += 0.05
                else if (this.scale >= 0.7) this.scale -= 0.1
                this.clientWidth = width
            },

            debounce(fn, delay = 300) {
                let timer = null
                return function(...args) {
                    timer && clearTimeout(timer)
                    timer = setTimeout(() => fn(args), delay)
                }
            }
        }
    }

</script>event

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.relative{position: relative}
.absolute{position: absolute}
.transition{transition: all .35s}

.flex-center{display: flex;justify-content: center;align-items: center}
.round_view{width: 516px;height: 474px;transform: scale(var(--scale))}
.circle_view span {width: 54px;height: 54px;border-radius: 50%;background: #fff;}
.circle_view:first-child{width: 176px;height: 156px;left: 30px;bottom: 2px;z-index: 3}
.circle_view:first-child .circle_view-text{top: 34px;left: 57px;color: $background-red}
.circle_view:nth-child(2){width: 149px;height: 159px;left: 2px;bottom: 120px;z-index: 2}
.circle_view:nth-child(2) .circle_view-text{top: 34px;left: 36px;color: $color2}
.circle_view:nth-child(3){width: 161px;height: 149px;left: 8px;top: 72px;z-index: 1}
.circle_view:nth-child(3) .circle_view-text{top: 37px;left: 59px;color: $color3}
.circle_view:nth-child(4){width: 169px;height: 155px;left: 96px;top: 0}
.circle_view:nth-child(4) .circle_view-text{top: 37px;left: 76px;color: $color4}
.circle_view:nth-child(5){width: 142px;height: 145px;right: 132px;top: -5px;z-index: 2}
.circle_view:nth-child(5) .circle_view-text{top: 47px;left: 58px;color: $color5}
.circle_view:nth-child(6){width: 154px;height: 168px;right: 24px;top: 39px;z-index: 1}
.circle_view:nth-child(6) .circle_view-text{top: 80px;right: 48px;color: $color6}
.circle_view:nth-child(7){width: 136px;height: 165px;right: 2px;top: 164px}
.circle_view:nth-child(7) .circle_view-text{bottom: 40px;right: 36px;color: $color7}
.circle_view:nth-child(8){width: 170px;height: 158px;bottom: 25px;right: 16px;z-index: 1}
.circle_view:nth-child(8) .circle_view-text{bottom: 41px;right: 69px;color: $color8}
.circle_view:hover{transform: scale(1.08)}

.circle_view-center{width: 213px;height: 213px;background-color: #F6C72C;border-radius: 100%;left: 50%;top: 50%;transform: translate(-50%, -50%);margin-top: 13px;color: #fff;font-size: 36px;}
.circle_view-center:hover{transform: translate(-50%, -50%) scale(1.08)}

</style>